<template>
  <div class="goods-item" @click="itemClick">
    <!-- {{goodsItem.productImage}} -->
    <img :src="goodsItem.productImage | actualurl" alt="" @load="loadImage">
    <div class="goods-info">
      <p>{{goodsItem.productTitle}}</p>
      <span class="price">{{goodsItem.presentPrice | tomoney}}</span>
      <span class="number">{{goodsItem.productNumber}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props: {
      goodsItem: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods:{
      loadImage(){
        this.$bus.$emit('itemImageLoad');
      },
      itemClick() {
        // console.log(this.goodsItem);
        this.$router.push("/detail/"+this.goodsItem.merchantId+"/"+this.goodsItem.productId);
        // this.$router.push({
        //   path:'/detail',
        //   query:{
        //     "id":111
        //   }
        // })
      }
    },
    filters: {
      actualurl(value) {
        return "http://dev.api.sqiandai.com" + value;
      },
      tomoney(value) {
        return "$ " + value
      }
    }
  }
</script>

<style>
  .goods-item {
  }
  .goods-item p{
    margin: 5px;
  }
  .goods-item span{
    margin: 5px;
  }
  .goods-item img {
    width: 100%;
    border-radius: 5px;
  }
  .goods-info{
    font-size: 12px;
    text-align: center;
    overflow: hidden;
  }
  .goods-info p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .price {
    color: var(--color-high-text);
  }
</style>
